<ul id="attrTab" class="nav nav-tabs">
    <volist name="attribute_type" id="attr">
        <li <eq name="i" value="1">class="active"</eq>><a href="#attrTab{$i}" data-toggle="tab">{$attr.title}</a></li>
    </volist>
</ul>
<!--<div id="attrContainer" class="tab-content">-->
    <!--<volist name="attribute_type" id="attr">-->
        <!--<div class='tab-pane <eq name="i" value="1">fade in active</eq>' id="attrTab{$i}" style="padding-top: 5px;">-->
            <!--<span id="add_{$attr.name}" data-type="{$attr.name}" style="padding: 5px 8px;cursor:pointer;">+</span>-->
            <!--<div id="{$attr.name}-container">-->
                <!--&lt;!&ndash;<div class="color" data-color-id="0">&ndash;&gt;-->
                <!--&lt;!&ndash;<input type="checkbox" class="color-select" name="color-select[]">&ndash;&gt;-->
                <!--&lt;!&ndash;<span class="del_color" style="padding: 0 4px;cursor: pointer;" onclick="del_color(this);">-</span>&ndash;&gt;-->
                <!--&lt;!&ndash;<input type="color" name="color[0][value]" class="picker-text" maxlength="30" data-old="藕色">&ndash;&gt;-->
                <!--&lt;!&ndash;<input type="text" name="color[0][name]" class="picker-remark" placeholder="名称（如天空蓝等）" value="" maxlength="30">&ndash;&gt;-->
                <!--&lt;!&ndash;<input type="hidden" name="color_img[]" class="picker-img" value="">&ndash;&gt;-->
                <!--&lt;!&ndash;<a href="#" >上传图片</a>&ndash;&gt;-->
                <!--&lt;!&ndash;<img width="20" height="20" src="https://img.alicdn.com/imgextra/i2/1676538063/TB2YHm3XF5N.eBjSZFvXXbvMFXa_!!1676538063.jpg"  class="custom-img">&ndash;&gt;-->
                <!--&lt;!&ndash;<a href="#" aria-label="删除图片" class="del-img" data-spm-anchor-id="a1z0h.7873970.1998855314.53">删除图片</a>&ndash;&gt;-->
                <!--&lt;!&ndash;</div>&ndash;&gt;-->
                <!--<volist name="color" id="val">-->
                    <!--<div class="{$attr.name}" data-{$attr.name}-id="{$i}">-->
                        <!--<span class="del_{$attr.name}" style="padding: 0 4px;cursor: pointer;" onclick="del_color(this);">-</span>-->
                        <!--<input type="{$attr.name}" name="{$attr.name}[{$i}][value]" class="picker-text" maxlength="30" value="{$val.value}">-->
                        <!--<input type="text" name="{$attr.name}[{$i}][name]" class="picker-remark" placeholder="{$attr.desc}" value="{$val.name}" maxlength="30">-->
                    <!--</div>-->
                <!--</volist>-->
            <!--</div>-->

        <!--</div>-->
    <!--</volist>-->
<!--</div>-->
<div id="attrContainer" class="tab-content">
    <div class="tab-pane fade in active" id="attrTab1" style="padding-top: 5px;">
        <span id="add_color" style="padding: 5px 8px;cursor:pointer;">+</span>
        <div id="color-container">
            <!--<div class="color" data-color-id="0">-->
            <!--<input type="checkbox" class="color-select" name="color-select[]">-->
            <!--<span class="del_color" style="padding: 0 4px;cursor: pointer;" onclick="del_color(this);">-</span>-->
            <!--<input type="color" name="color[0][value]" class="picker-text" maxlength="30" data-old="藕色">-->
            <!--<input type="text" name="color[0][name]" class="picker-remark" placeholder="名称（如天空蓝等）" value="" maxlength="30">-->
            <!--<input type="hidden" name="color_img[]" class="picker-img" value="">-->
            <!--<a href="#" >上传图片</a>-->
            <!--<img width="20" height="20" src="https://img.alicdn.com/imgextra/i2/1676538063/TB2YHm3XF5N.eBjSZFvXXbvMFXa_!!1676538063.jpg"  class="custom-img">-->
            <!--<a href="#" aria-label="删除图片" class="del-img" data-spm-anchor-id="a1z0h.7873970.1998855314.53">删除图片</a>-->
            <!--</div>-->
            <volist name="color" id="val">
                <div class="color" data-color-id="{$i}">
                    <span class="del_color" style="padding: 0 4px;cursor: pointer;" onclick="del_color(this);">-</span>
                    <input type="color" name="color[{$i}][value]" class="picker-text" maxlength="30" data-old="藕色" value="{$val.value}">
                    <input type="text" name="color[{$i}][name]" class="picker-remark" placeholder="名称（如天空蓝等）" value="{$val.name}" maxlength="30">
                </div>
            </volist>
        </div>

    </div>
    <div class="tab-pane" id="attrTab2">
        <span id="add_size" style="padding: 5px 8px;cursor:pointer;">+</span>
        <div id="size-container">
            <volist name="size" id="val">
                <div class="size" data-size-id="{$i}">
                    <span class="del_size" style="padding: 0 4px;cursor: pointer;" onclick="del_size(this);">-</span>
                    <input type="text" name="size[{$i}][value]" class="picker-text" maxlength="30" data-old="尺码代号,如M" value="{$val.value}">
                    <input type="text" name="size[{$i}][name]" class="picker-remark" placeholder="描述,如：中号" value="{$val.name}" maxlength="30">
                </div>
            </volist>
        </div>
    </div>
    <div class="tab-pane" id="attrTab3">
        <span id="add_spec" style="padding: 5px 8px;cursor:pointer;">+</span>
        <div id="spec-container">
            <volist name="spec" id="val">
                <div class="spec" data-spec-id="{$i}">
                    <span class="del_spec" style="padding: 0 4px;cursor: pointer;" onclick="del_spec(this);">-</span>
                    <input type="text" name="spec[{$i}][value]" class="picker-text" maxlength="30" data-old="规格名称,如：单只、套装" value="{$val.value}">
                </div>
            </volist>
        </div>
    </div>
</div>
<script>
    //颜色处理
    function del_color(e){
        trace(e);
        var color = $(e).parent(".color");
        trace(color);
        $(color).remove();
    }
    $(function(){
        $("#add_color").on('click',function(){
            trace('增加');
            var container = $("#color-container");
            var color = $("#color-container").children(":last-child") ;
            var color_id = $(color).attr("data-color-id")>0?$(color).attr("data-color-id"):0;
//            var color_id = $(color).attr("data-color-id");
            color_id = parseInt(color_id)+1;
            trace(color);
            trace('color_id='+color_id);
            var color_new = $('<div class="color" data-color-id="'+color_id+'"> <span class="del_color" style="padding: 0 4px;cursor: pointer;" onclick="del_color(this);">-</span> <input type="color" name="color['+color_id+'][value]" class="picker-text" maxlength="30" data-old="藕色"> <input type="text" name="color['+color_id+'][name]" class="picker-remark" placeholder="名称（如天空蓝等）" value="" maxlength="30"> </div>');
            $(container).append(color_new);
        });

    });

    //尺寸处理

    function del_size(e){
        trace(e);
        var size = $(e).parent(".size");
        trace(size);
        $(size).remove();
    }
    $(function(){

        //增加尺寸
        $("#add_size").on('click',function(){
            trace('增加');
            var container = $("#size-container");
            var size = $("#size-container").children(":last-child") ;
            var size_id = $(size).attr("data-size-id")>0?$(size).attr("data-size-id"):0;
            size_id = parseInt(size_id)+1;
            trace(size);
            trace('size_id='+size_id);
            var size_new = $('<div class="size" data-size-id="'+size_id+'"> <span class="del_size" style="padding: 0 4px;cursor: pointer;" onclick="del_size(this);">-</span> <input type="text" name="size['+size_id+'][value]" class="picker-text" maxlength="30" placeholder="尺码代号,如M"> <input type="text" name="size['+size_id+'][name]" class="picker-remark" placeholder="描述,如：中号" value="" maxlength="30"> </div>');
            $(container).append(size_new);
        });
    });

    //规格处理

    function del_spec(e){
        trace(e);
        var spec = $(e).parent(".spec");
        trace(spec);
        $(spec).remove();
    }
    $(function(){

        //增加规格
        $("#add_spec").on('click',function(){
            trace('增加');
            var container = $("#spec-container");
            var spec = $("#spec-container").children(":last-child") ;
            var spec_id = $(spec).attr("data-spec-id")>0?$(spec).attr("data-spec-id"):0;
            spec_id = parseInt(spec_id)+1;
            trace(spec);
            trace('spec_id='+spec_id);
            var spec_new = $('<div class="spec" data-spec-id="'+spec_id+'"> <span class="del_spec" style="padding: 0 4px;cursor: pointer;" onclick="del_spec(this);">-</span> <input type="text" name="spec['+spec_id+'][value]" class="picker-text" maxlength="30" placeholder="规格名称,如：单只、套装"></div>');
            $(container).append(spec_new);
        });
    });
</script>

